<template>
  <div class="header flex">
    <div class="left flex">
      <img class="logo" src="@/assets/images/logo.png" />
      <div class="line"></div>
      <span class="title">{{ title }}</span>
    </div>
    <div class="right flex">
      <div class="nav-btn" v-waves @click="changeScreen">
        <i class="iconfont nav_adapt_hov"></i>
      </div>
      <div class="line"></div>
      <div class="nav-btn" v-waves @click="changeSkin">
        <i class="iconfont nav_skin_nor"></i>
      </div>
      <div class="line"></div>
      <el-badge :value="200" :max="99">
        <div class="nav-btn" v-waves>
          <i class="iconfont nav_todo_hov"></i>
        </div>
      </el-badge>
      <div class="line"></div>
      <div class="nav-btn" v-waves>
        <i class="iconfont nav_person_nor"></i>
      </div>
      <div class="line"></div>
      <div class="nav-btn" v-waves>
        <router-link to="/login">
          <i class="iconfont nav_exit_hov"></i>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const title = ref<string>('CMS管控一体化系统');

const changeScreen = () => {
}

const changeSkin = () => {
}
</script>
<style lang="scss" scoped>
.header {
  height: 46px;
  padding: 0 20px 0 20px;
  background: var(--header-bg-color);
  justify-content: space-between;

  .left {
    height: 100%;
    .logo {
      height: 31px;
    }
    .line {
      width: 1px;
      height: 24px;
      margin: 0 16px;
      background: var(--header-divider-color);
    }
    .title {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: var(--herder-color);
      line-height: 24px;
    }
  }

  .right {
    height: 100%;
    .line {
      width: 1px;
      height: 18px;
      margin: 0 20px;
      background: var(--header-icon-divider-color);
    }
    .iconfont {
      font-size: 20px;
      color: var(--header-icon-color);
      cursor: pointer;
    }
    .iconfont:hover {
      color: var(--header-icon-hover-color);
    }
    .nav-btn {
      padding-top: 2px;
      width: 24px;
      height: 24px;
      text-align: center;
      color: var(--header-icon-hover-color);
    }
  }
}
</style>
